import React from 'react';
import { Card, List } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Link from 'umi/link';

const data = [
  {
    title: 'rc-form例子',
    url: '/rc-form-demo',
    type: 'form',
  },
  {
    title: '一个页面，多组Form表单测试。',
    url: '/more-form-demo',
    type: 'form',
  },
  {
    title: '自定义控件适配Form组件的例子',
    url: '/antd-form-demo',
    type: 'form',
  },
  {
    title: '动态增长表单例子',
    url: '/dynamic-form-demo',
    type: 'form',
  },
  {
    title: 'Upload组件的使用',
    url: '/upload-demo',
    type: 'form',
  },
  {
    title: '可编辑表格组件的使用',
    url: '/editable-demo',
    type: 'component',
  },
  {
    title: 'DvaJS例子',
    url: '/dva-demo',
    type: 'other',
  },
  {
    title: '代码编辑器',
    url: '/code-edit-demo',
    type: 'other',
  },
  {
    title: '带缩进的textarea',
    url: '/tab-textarea-demo',
    type: 'other',
  },
  {
    title: '表格固定头与固定列',
    url: '/freeze-table-demo',
    type: 'other',
  },
  {
    title: '图表联动-demo',
    url: '/chart-linkage/example',
    type: 'charts',
  },
  {
    title: '图表联动-test',
    url: '/chart-linkage',
    type: 'charts',
  },
  {
    title: 'transform数据处理demo',
    url: '/chart-transform-demo',
    type: 'charts',
  },
  {
    title: 'markdown测试',
    url: '/markdown-test',
    type: 'other',
  },
  {
    title: 'useRef的使用',
    url: '/use-ref-demo',
    type: 'other',
  },
];

export default (): React.ReactNode => (
  <PageHeaderWrapper>
    <Card
      title="表单学习"
      style={{
        marginBottom: 12,
      }}
    >
      <List
        dataSource={data.filter(({ type }) => type === 'form')}
        renderItem={({ title, url }) => (
          <List.Item>
            <Link to={url}>{title}</Link>
          </List.Item>
        )}
      ></List>
    </Card>
    <Card
      title="相关组件开发"
      style={{
        marginBottom: 12,
      }}
    >
      <List
        dataSource={data.filter(({ type }) => type === 'component')}
        renderItem={({ title, url }) => (
          <List.Item>
            <Link to={url}>{title}</Link>
          </List.Item>
        )}
      ></List>
    </Card>
    <Card
      title="图表"
      style={{
        marginBottom: 12,
      }}
    >
      <List
        dataSource={data.filter(({ type }) => type === 'charts')}
        renderItem={({ title, url }) => (
          <List.Item>
            <Link to={url}>{title}</Link>
          </List.Item>
        )}
      ></List>
    </Card>
    <Card
      title="其他"
      style={{
        marginBottom: 12,
      }}
    >
      <List
        dataSource={data.filter(({ type }) => type === 'other')}
        renderItem={({ title, url }) => (
          <List.Item>
            <Link to={url}>{title}</Link>
          </List.Item>
        )}
      ></List>
    </Card>
  </PageHeaderWrapper>
);
